import React, { useCallback, useState } from 'react'

export default function App() {
    const [list, setlist] = useState([]);
    const [text, settext] = useState('');
    let handleValue = (evt)=>{
        console.log(text);
        settext(evt.target.value);
    }
    let handleList = useCallback(()=>{ //useCallback用来缓存函数，提升性能，后面的数组为依赖，只有依赖的值改变了，才重新运行函数，否则直接调用缓存。
        setlist([...list,text]);
        settext('')
    },[text,list])
  return (
    <div>
        <input type='text' onChange={handleValue} value={text}></input>
        <button onClick={handleList}>click</button>
        <ul>
            {
                list.map((item,index)=>
                <li key={item}>
                    {item}
                </li>)
            }
        </ul>
    </div>
  )
}
